<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.lineChart();
  },
  methods: {
    lineChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        title: {
          text: "SOC_四轮十维考核模型完整性",
          subtext: "阀值：<10%",
          left: "center"
        },
        legend: {
          data: ["SOC_四轮十维考核模型完整性", "阀值"],
          bottom: 0
        },
        xAxis: {
          type: "category",
          data: ["2", "4", "6", "8", "10", "12", "14"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "SOC_四轮十维考核模型完整性",
            type: "line",
            data: [1, 2, 3, 6, 3, 8],
            lineStyle: {
              color: "#0000ff",
              width: 6
            }
          },
          {
            name: "阀值",
            type: "line",
            data: [9, 10, 11, 12, 13],
            lineStyle: {
              color: "red",
              width: 6
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>